{% extends "base.njk" %}
{% block main %}

<link rel="stylesheet" type="text/css" href="lib/css/component.css" />
<style type="text/css">
html, body, .container, .header {
  height: 100%;
}

body {
  background-image: url("/images/lulu_window.webp");
  {# background-image: url("/images/lulu_gachi.jpg"); #}
  background-attachment: fixed;
	
}
.main-page-slider-item {
	display: block;
}
.bg-img{
	widows: 100%;
	height: 100%；
}
.trigger {
  color: #222;
}
.timeline {
	#padding-top: 32px;
	#margin-top: 32px;
	z-index: 2;
}
.timeline .lomot-title {
	padding-top: 24px;
}

		.textflote{
			position: fixed;
			top: 300px;
			width: 100%;
			height: 100%;
		}
		.marquee-text{
			height: 100%;
			width: 100%;
			onMouseOut = "this.start()";
			onMouseOver="this.stop()";
		}
</style>
	<div id="container" class="container intro-effect-push">
		{# <div class="textflote">
				<marquee onMouseOver = "this.stop()" onMouseOut="this.start()"direction=left>佐倉栞：一周年おめでとうございます！これからもよろしく(｡◝ᴗ◜｡）るるのために頑張ります</marquee>
				<marquee scrolldelay="100" direction=left>肥奥·胖兰度：  恭喜lulu一周年，能遇见lulu真是太好了!
				</marquee><marquee direction=left>未来喵：  恭喜lulu一周年！拜托了，不要忘记我们（お願いします、私たちを忘れないでください）！真的最喜欢（大好き）lulu了！
				</marquee><marquee direction=left>天の雾: 恭喜lulu一周年，会继续一直喜欢你的！❤一周年おめでとう、これからもずっと好きだよ！❤
				</marquee><marquee direction=left>kisama：lulu一周年恭喜了，你在几周年，我就陪你几周年。
				</marquee><marquee direction=left>母狩り：恭喜lulu一周年，るるのこと大好き，もうるる以外の女の子が好きになれないQAQ
				</marquee>
		</div> #}
		<header class="main-page-slider-item header" id = "head">
			<!-- <img  src="images/lulu.png"/> -->
			{# <div class="bg-img"><img src="images/lulu_window.jpg" alt="Background Image"/></div> #}
			<div class="bg-img"><img src="images/lulu_banner.png" alt="Background Image"/></div>
			<div class="title">				
				<h1 style="color: #4cb4e7;">雫るる</h1>
				{# <h2 style="color: #ffee93;">超爱游戏，超爱拉面，自宅警备员lulu</h2> #}
				<h2 style="color: #6a6a6a;">超爱游戏，超爱拉面，自宅警备员lulu</h2>
				<!-- <ul>
					<li><a href="https://space.bilibili.com/387636363/"></a><img src="images/bilibili.png"/></a></li>
					<li><a href="https://www.youtube.com/channel/UCPrTbX6j27POmgXEZPlMV-g"> <img src="images/YouTube.png"/></a></li>
					<li><img src="images/twitter.png"/></li>
					<li><a href="https://zh.moegirl.org/%E9%9B%ABLulu"><img src="images/mengniang.png"/></a></li>
				</ul> -->
			</div>
		</header>
		<button class="main-page-slider-item trigger" data-info="Time  Line"><span class="layui-anim layui-anim-scale layui-anim-loop"></span></button>
	{# </div>
	<div id="container0" class="container"> #}
    <div class="title">
			<h1 style="color: #333;"> 雫るる</h1>
			<p class="subline" style="color: #333;">小心Vtuber，小心雫るる</p>
		</div>
		<article class="timeline content">
			<div class="linecolor" style="background-color: rgba(250,250,250,0.8);">
					<p class="lomot-title">官方活动</p>
					<p>2019年</p>
					<ul class="layui-timeline">
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">5月23日</h3>
								<p>
									出现在Kanna的B站LOL直播中。（可以说Lulu是在B站出道。）
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">6月11日</h3>
								<p>bilibili首次直播。（Lulu实际上是从B站出道的虚拟UP主）</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">6月29日</h3>
								<p>
									正式加入雪貂女学院
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">7月17日</h3>
								<p>
									拖了一个多月才在B站发表自我介绍视频
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">9月4日</h3>
								<p>
									开启新专题“雫るる的烦恼咨询室”
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">9月15日</h3>
								<p>
									为了减肥在B站举行肥宅演唱会。减肥成绩：突破500公斤。成为千斤大小姐……
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">9月19日</h3>
								<p>
									参加bilibili举办的活动《寻梦异世镜-第二期：镜像》。节目规则为从四个Lulu中识别真伪（其他三人实际上是Kanna、美人老师、漂亮老师）。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">9月21日</h3>
								<p>
									B站粉丝1万达成。并联动Kanna、白音小雪和花园Serena玩《Ultimate Chicken Horse（超级马鸡）》，这是Lulu首次与雪貂以外的Vtuber联动。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">9月28日</h3>
								<p>
									联动kanna和库特菌玩吃鸡。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">10月3日</h3>
								<p>
									Lulu在直播中宣布退出“雪貂女学院”。虽然很难过，但Lulu表示自己“现在非常幸福（产仔会长痔疮）”。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">11月7日</h3>
								<p>
									直播进行重大发表宣言！受到邀请参加了12月21、22日的成都bw！おめでとう!
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">11月15日</h3>
								<p>
									联动DD头子七柠玩俄罗斯方块，输了的一方必须接受惩罚游戏。不负众望地，在对手放了个太平洋的情况下，Lulu还是被虐得很惨。
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">12月21日</h3>
								<p>
									参加BW成都站活动，主持人为从出生就开始单推Lulu的张京华（众lulu民表示终于看到了lulu与DD们现场对线）。年度汉字为“新（爱）”。
								</p>
							</div>
						</li>
						<p>2020年</p>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">1月2日</h3>
								<p>
									新年的第一次直播，和大家一起查询hsk2级成绩。以189/200的成绩轻松高分通过。(不过本人对不是满点通过表示遗憾。)lulu的2020年目标是通过hsk5级考试，争取来中国留学哦！！！
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">1月2日</h3>
								<p>
									新年的第一次直播，和大家一起查询hsk2级成绩。以189/200的成绩轻松高分通过。(不过本人对不是满点通过表示遗憾。)lulu的2020年目标是通过hsk5级考试，争取来中国留学哦！！！
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">1月25日</h3>
								<p>
									使用大量中文祝大家新春快乐（恭喜发财，红包拿↓来。红包拿↓来，总督拿↓来。(同时)新的一年，新的整活，请多关照。），并表示希望大家不要出去约会。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">2月29日</h3>
								<p>
									以擂台赛的形式举办首届“lu宝杯”LOLsolo大赛。胜者是渐散人心。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">3月8日</h3>
								<p>
									lulu的55岁生日会！
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">3月10日</h3>
								<p>
									联动著名MMDup主，整活系vup冰糖（众lulu民：小心bt！），进行了深度的中国沙雕文化交流。在直播中，两人对各种沙雕表情包、猫猫（花园Serena）的创作的迷之二创[20]以及各自的奇怪XP性僻进行了深度的讨论。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">3月22日</h3>
								<p>
									lulu以视频的形式参加了bilibili的活动“春日V鉴赏会”（其实就是只投了自己的出道视频）。白上吹雪和夏色祭观看lulu的出道视频后，觉得Lulu很清楚，并表示AWSL。她们上当了！
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">3月28日</h3>
								<p>
									lulu在冰糖的50w纪念直播中发表祝贺视频并表示“我们都喜欢ghs！”。对此，冰糖表示“我和lulu初次联动的时候总有人说很不妙，但是我们的直播间没有被ban哦。”之后lulu也在动态里晒出了自己为冰糖献上的画作
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">5月20日</h3>
								<p>
									在520甜蜜的节日中和《恋爱循环》的甜蜜氛围下，lulu进行了“重大发表”——新衣服揭露将在5月23日23点！此后翻找历史记录看了二创视频，但似乎没有领会到其中的梗。历史记录中还有日本up主小野寺AMIKUN的中文学习心得视频。看了小野寺的视频，lulu愈发感叹自己的中文水平还有很多不足，一转学习。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">5月23日</h3>
								<p>
									新衣服发布会。新衣服质量异常之高，融合了白丝，白发，眼镜，宠物，猫耳等可爱要素，也融合了dd斩首，目力lulu，接头霸王，下巴学院，debu，豆芽等生草要素，当然也保留了传统艺能敬礼。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">5月24日</h3>
								<p>
									在自己的直播间下播后被京华张锤子叫到overidea直播间突击联动。这也是lulu首次出现在overidea的直播间。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">6月1日</h3>
								<p>
									使用了新的OP,ED,背景，BGM，联动樱樱火，w丘丘w，ATM西米酱，一起玩Overcooking胡闹厨房（分手厨房）。通过这次直播lulu也从一开始的自闭状态，渐渐地开始着急指挥，有了沟通。
								</p>
							</div>
						</li><li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title">6月11日</h3>
								<p>
									一周年纪念
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<div class="layui-timeline-title">未来...</div>
							</div>
						</li>
					</ul>
			</div>
		</article>
	</div><!-- /container -->
	<script src="lib/js/classie.js"></script>
	<script>
		(function() {

			var ie = (function(){
					var undef,rv = -1; // Return value assumes failure.
					var ua = window.navigator.userAgent;
					var msie = ua.indexOf('MSIE ');
					var trident = ua.indexOf('Trident/');

					if (msie > 0) {
						// IE 10 or older => return version number
						rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
					} else if (trident > 0) {
						// IE 11 (or newer) => return version number
						var rvNum = ua.indexOf('rv:');
						rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
					}

					return ((rv > -1) ? rv : undef);
				}());
			var keys = [32, 37, 38, 39, 40], wheelIter = 0;

			function preventDefault(e) {
				e = e || window.event;
				if (e.preventDefault)
					e.preventDefault();
				e.returnValue = false;  
			}

			function keydown(e) {
				for (var i = keys.length; i--;) {
					if (e.keyCode === keys[i]) {
						preventDefault(e);
						return;
					}
				}
			}

			function touchmove(e) {
				preventDefault(e);
			}

			function wheel(e) {
					// for IE 
					//if( ie ) {
						//preventDefault(e);
					//}
				}

				function disable_scroll() {
					window.onmousewheel = document.onmousewheel = wheel;
					document.onkeydown = keydown;
					document.body.ontouchmove = touchmove;
				}

				function enable_scroll() {
					window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
				}

				var docElem = window.document.documentElement,
				scrollVal,
				isRevealed, 
				noscroll, 
				isAnimating,
				container = document.getElementById( 'container' ),
				trigger = container.querySelector( 'button.trigger' );

				function scrollY() {
					return window.pageYOffset || docElem.scrollTop;
				}
				
				function scrollPage() {
					scrollVal = scrollY();
					
					if( noscroll && !ie ) {
						if( scrollVal < 0 ) return false;
						// keep it that way
						window.scrollTo( 0, 0 );
					}

					if( classie.has( container, 'notrans' ) ) {
						classie.remove( container, 'notrans' );
						return false;
					}

					if( isAnimating ) {
						return false;
					}
					
					if( scrollVal <= 0 && isRevealed ) {
						toggle(0);
					}
					else if( scrollVal > 0 && !isRevealed ){
						toggle(1);
					}
				}

				function toggle( reveal ) {
					isAnimating = true;
					
					if( reveal ) {
						classie.add( container, 'modify' );
					}
					else {
						noscroll = true;
						disable_scroll();
						classie.remove( container, 'modify' );
					}

					// simulating the end of the transition:
					setTimeout( function() {
						isRevealed = !isRevealed;
						isAnimating = false;
						if( reveal ) {
							noscroll = false;
							enable_scroll();
						}
					}, 1200 );
				}

				// refreshing the page...
				var pageScroll = scrollY();
				noscroll = pageScroll === 0;
				
				disable_scroll();
				
				if( pageScroll ) {
					isRevealed = true;
					classie.add( container, 'notrans' );
					classie.add( container, 'modify' );
				}
				
				window.addEventListener( 'scroll', scrollPage );
				trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
			})();
		</script>
{# {% include "./component/carousel.njk" %}
{% include "./component/row-hot.njk" %}
{% include "./component/row-service.njk" %}
{% include "./component/row-featurette.njk" %} #}

{% endblock %}